<template>
  <div class="contain-side">
    <div class="side">
      <div class="side-head">
        <div class="side-head-left"></div>
        <div class="side-head-text">设备检查指导</div>
      </div>
      <div class="side-main">
        <div class="side-main1">
          <div class="title" @click="getUseRequest">
            <div class="title-left">控制阀</div>
            <div class="title-right1">v</div>
          </div>
          <div class="main-text" id="useRequest1">
            （1）分离器汽、液阀开度
            <span>>></span>
          </div>
          <div class="main-text" id="useRequest2">
            （2）控制阀开度、压力
            <span>>></span>
          </div>
          <div class="main-text" id="useRequest3">
            （3）汽水换热器进气阀门开度
            <span>>></span>
          </div>
          <div class="main-text" id="useRequest4">
            （4）伴生空冷器进气阀门开度
            <span>>></span>
          </div>
        </div>

        <div class="side-main2">
          <div class="title" @click="getUseRequest1">
            <div class="title-left">出汽管线</div>
            <div class="title-right2">v</div>
          </div>

          <div class="main-text" id="check2-1">
            （1）出汽管线压力和状态
            <span>>></span>
          </div>
        </div>

        <div class="side-main3">
          <div class="title" @click="getUseRequest2">
            <div class="title-left">冷源量</div>
            <div class="title-right2">v</div>
          </div>

          <div class="main-text" id="check3-1">
            （1）汽水换热器冷原量
            <span>>></span>
          </div>
        </div>

        <div class="side-main4">
          <div class="title" @click="getUseRequest3">
            <div class="title-left">外输频率</div>
            <div class="title-right2">v</div>
          </div>

          <div class="main-text" id="check4-1">
            （1）伴生气压缩机进气压力
            <span>>></span>
          </div>
          <div class="main-text" id="check4-2">
            （2）伴生气压缩机频率
            <span>>></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 获取使用需求
    getUseRequest() {
      // 使用需求内容
      let useRequest1 = document.getElementById("useRequest1");
      let useRequest2 = document.getElementById("useRequest2");
      let useRequest3 = document.getElementById("useRequest3");
      let useRequest4 = document.getElementById("useRequest4");
      // 下拉图表
      let titleR = document.querySelector(".title-right1");

      if (useRequest1.style.display === "none") {
        useRequest1.style.display = "block";
        useRequest2.style.display = "block";
        useRequest3.style.display = "block";
        useRequest4.style.display = "block";
        titleR.textContent = "v";
      } else {
        useRequest1.style.display = "none";
        useRequest2.style.display = "none";
        useRequest3.style.display = "none";
        useRequest4.style.display = "none";
        titleR.textContent = "^";
      }
    },

    // 获取使用需求
    getUseRequest1() {
      // 使用需求内容
      let check2_1 = document.getElementById("check2-1");
      // 下拉图表
      let titleR = document.querySelector(".title-right2");

      if (check2_1.style.display === "none") {
        check2_1.style.display = "block";
        titleR.textContent = "v";
      } else {
        check2_1.style.display = "none";
        titleR.textContent = "^";
      }
    },

    // 获取使用需求
    getUseRequest2() {
      // 使用需求内容
      let check3_1 = document.getElementById("check3-1");
      // 下拉图表
      let titleR = document.querySelector(".title-right2");

      if (check3_1.style.display === "none") {
        check3_1.style.display = "block";
        titleR.textContent = "v";
      } else {
        check3_1.style.display = "none";
        titleR.textContent = "^";
      }
    },

    // 获取使用需求
    getUseRequest3() {
      // 使用需求内容
      let check4_1 = document.getElementById("check4-1");
      let check4_2 = document.getElementById("check4-2");
      // 下拉图表
      let titleR = document.querySelector(".title-right2");

      if (check4_1.style.display === "none") {
        check4_1.style.display = "block";
        check4_2.style.display = "block";
        titleR.textContent = "v";
      } else {
        check4_1.style.display = "none";
        check4_2.style.display = "none";
        titleR.textContent = "^";
      }
    },
  },
};
</script>

<style scoped>
.contain-side {
  width: 100%;
  height: 100%;
  background-color: #042660;
  padding-top: 1px;
  padding-right: 5px;
  padding-left: 5px;
}

/* side */
.side {
  margin-top: 30px;
  margin-bottom: 30px;
  margin-left: 5px;
  margin-right: 5px;
  background-color: #20334d;
  height: 100vh;
}

/* 头部 */
.side-head {
  height: 60px;
  display: flex;

  background-image: url(../../../assets/img/tankLevel1.svg);
  background-size: cover;
  background-repeat: no-repeat;

  text-align: center;
  color: white;
  font-size: 1.5em;
  line-height: 60px;
}
.side-head-left {
  width: 50px;
  height: 60px;
  background-image: url(../../../assets/img/alarmCheckHead5.svg);
  background-size: cover;
  background-repeat: no-repeat;
  /* background-position: 50% 50%; */
}

.side-head-text {
  flex: 1;
  height: 60px;
  text-align: center;
}

.title {
  display: flex;
  height: 50px;

  border-bottom: 1px solid gray;
  background-color: #34c7ce;
  color: white;
}

.title-left {
  flex: 1;
  font-size: 1.2em;
  line-height: 50px;
  padding-left: 10px;
}

.title-right1,
.title-right2 {
  width: 80px;
  text-align: right;
  font-size: 1.2em;
  line-height: 50px;
  text-align: center;
}

/* 主体 */
.side-main {
  margin: 10px;
}

.main-text {
  display: block;
  height: 40px;
  background-color: white;
  padding-left: 20px;

  font-size: 20px;
  font-family: PingFangSC;
  font-weight: 400;
  font-style: normal;
  line-height: 40px;
  border-bottom: 1px solid gray;
}

/* 步骤 */
.side-main-item {
  background-color: #34c7ce;

  color: #415058;
  font-size: 1.5em;

  border-bottom: solid 1px gray;
  padding: 10px;
}
</style>